<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 确保网页可以正确显示不同的字符集 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 针对不同设备的视口设置，让页面在移动设备上能自适应显示 -->
    <title>请先登录</title>
    <!-- 页面的标题，会显示在浏览器的标签栏上 -->
    <style>
        /* 页面整体的样式设置 */
        body {
            font-family: Arial, sans-serif;
            /* 设置字体为 Arial，如果 Arial 不可用，则使用 sans-serif 字体族中的其他字体 */
            background-color: #f0f0f0;
            /* 页面的背景颜色为浅灰色 */
            display: flex;
            /* 使用 flex 布局，方便元素的对齐和排版 */
            justify-content: center;
            /* 水平方向上居中元素 */
            align-items: center;
            /* 垂直方向上居中元素 */
            height: 100vh;
            /* 使页面高度占满整个视口的高度 */
            margin: 0;
            /* 去掉页面的默认外边距 */
        }
       .login-form {
            background-color: #fff;
            /* 登录表单的背景颜色为白色 */
            padding: 20px;
            /* 表单内部的填充为 20 像素 */
            border-radius: 5px;
            /* 表单的边框圆角为 5 像素 */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            /* 给表单添加一个轻微的阴影效果，增强立体感 */
        }
       .login-form label {
            display: block;
            /* 让标签独占一行，使输入框与标签垂直排列 */
            margin-bottom: 5px;
            /* 标签与输入框之间的间距为 5 像素 */
        }
       .login-form input[type="text"],
       .login-form input[type="password"] {
            width: 100%;
            /* 输入框的宽度为 100%，占满表单的宽度 */
            padding: 8px;
            /* 输入框的内边距为 8 像素 */
            margin-bottom: 15px;
            /* 输入框之间的间距为 15 像素 */
            border: 1px solid #ccc;
            /* 输入框的边框为 1 像素的浅灰色边框 */
            border-radius: 3px;
            /* 输入框的边框圆角为 3 像素 */
        }
       .login-form input[type="submit"] {
            width: 100%;
            /* 提交按钮的宽度为 100%，占满表单的宽度 */
            padding: 10px;
            /* 提交按钮的内边距为 10 像素 */
            background-color: #007BFF;
            /* 提交按钮的背景颜色为蓝色 */
            color: #fff;
            /* 提交按钮的字体颜色为白色 */
            border: none;
            /* 去掉提交按钮的边框 */
            border-radius: 3px;
            /* 提交按钮的边框圆角为 3 像素 */
            cursor: pointer;
            /* 鼠标悬停在提交按钮上时显示为手型光标 */
        }
       .login-form input[type="submit"]:hover {
            background-color: #0056b3;
            /* 鼠标悬停在提交按钮上时，背景颜色加深 */
        }
    </style>
</head>
<body>
    <div class="login-form">
        <!-- 包含登录表单的容器 -->
        <h2>Login</h2>
        <!-- 登录表单的标题 -->
        <form action="./index.html" method="post">
            <!-- 表单元素，使用 POST 方法提交数据 -->
            <label for="username">Username:</label>
            <!-- 用户名标签，for 属性关联对应的输入框 -->
            <input type="text" id="username" name="username">
            <!-- 输入用户名的文本框，id 为输入框的唯一标识，name 为提交数据时的名称 -->
            <br>
            <label for="password">Password:</label>
            <!-- 密码标签，for 属性关联对应的输入框 -->
            <input type="password" id="password" name="password">
            <!-- 输入密码的文本框，输入的内容会显示为黑点，保护密码隐私 -->
            <br>
            <input type="submit" value="Submit">
            <!-- 提交按钮，点击后将表单数据发送到指定的 action 地址 -->
        </form>
    </div>
</body>
</html>